<template>
  <view class="container">
    <view style="text-align: center;padding-top: 15px;">详情列表图:</view>

    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload name="product_img" :maxCount="6" :fileList="filelist1" width="100" height="100" @delete="del1"
        @afterRead="read1" />
    </view>
    <view class="content">
      <u-form labelPosition="left" labelWidth="60" :model="service" :rules="rules" ref="product">
        <!-- 名称 -->
        <u-form-item label="标题" prop="name">
          <u-input v-model="service.name" placeholder="请输入商品名称" />
        </u-form-item>



        <view class="Box">
          <view v-for="(value, key) in service.carwash" :key="key" class="checkbox-container">
            <checkbox @click="changebox({ id: value.id, checked: value.checked, num: value.num })" class="checkbox"
              :checked="JSON.parse(value.checked)"></checkbox>
            <text class="service-name">{{ value.title }}</text>
            <input class="service-count" type="number" v-model="value.num" />
          </view>
        </view>

        <!-- 商品描述 -->
        <u-form-item label="简介" prop="detaile" borderBottom>
          <u-textarea placeholder="不低于3个字" v-model="service.detaile" count></u-textarea>
        </u-form-item>
        <u-form-item label="折扣" prop="zhekou">
          <u-input v-model="service.zhekou" placeholder="请输入折扣" />
        </u-form-item>
        <u-form-item label="有效期限(天)">
          <u-input v-model="service.dateyx" placeholder="请输入会员卡有效期限" />
        </u-form-item>

        <!-- 参数3 -->
        <u-form-item label="创建时间" prop="createtime_text">
          <u-input v-model="service.createtime_text" disabled />
        </u-form-item>
        <u-form-item label="活动期限" prop="actdate_text" borderBottom @click="
        activeshow = true;
      hideKeyboard1();
      ">
          <u-input v-model="service.actdate_text" disabledColor="#ffffff" placeholder="请输入套餐活动期限" disabled
            border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 全款 -->
        <u-form-item label="套餐价格" prop="free">
          <u-input type="float" v-model="service.free" />
        </u-form-item>

        <u-form-item label="背景图">
          <view class="avatar">
            <!-- 上传组件 -->
            <u-upload name="product_img" :maxCount="1" :fileList="filelist" width="100" height="100" @delete="del"
              @afterRead="read" />
          </view>
        </u-form-item>

        <u-datetime-picker :show="activeshow" :value="date" mode="date" @confirm="dateActiveConfirm"
          @cancel="dateActiveClose" @close="dateActiveClose"></u-datetime-picker>
        <u-datetime-picker :show="showdate" :value="date" mode="date" @confirm="dateConfirm" @cancel="dateClose"
          @close="dateClose"></u-datetime-picker>
        <!-- 提交按钮 -->
        <u-button text="修改套餐" icon="pushpin" size="small" type="success" :customStyle="btnStyle" @click="product" />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    this.leveid = options.leveid ? options.leveid : 0;

    this.list();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      checkboxdata: [],

      newthumbArr:[],

      carwashtypenumlist: [],

      checkboxValue1: [],

      value: 1,
      allchecked: false,

      showdate: false,
      activeshow: false,
      filelist: [],
      filelist1: [],
      auth: {},
      leveid: 0,
      thumbs_text: "",
      service: {
        name: "",
        detaile: "",
        free: "",
        zhekou: "",
        carwashdata: {}
      },
      piclist: [],

      rules: {
        zhekou: {
          required: true,
          message: "折扣不能为空",
          trigger: ["change"],
        },
        detaile: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },

        name: {
          required: true,
          message: "请填写套餐标题",
          trigger: ["blur", "change"],
        },

        createtime_text: {
          required: true,
          message: "创建时间不能为空",
          trigger: ["blur", "change"],
        },
        free: {
          required: true,
          message: "服务费用不能为空",
          trigger: ["blur", "change"],
        },
        actdate_text: {
          required: true,
          message: "会员套餐活动期限不能为空",
          trigger: ["blur", "change"],
        },


      },
    };
  },
  methods: {


    dateActiveClose() {
      this.activeshow = false;
    },
    dateActiveConfirm(e) {
      this.activeshow = false;
      this.service.actdate_text = uni.$u.timeFormat(e.value, "yyyy-mm-dd");
    },
    hideKeyboard1() {
      uni.hideKeyboard();
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.service.thumb_text = result.data;
        this.newthumbArr = this.newthumbArr.concat(result.data)

        // 合并对象
        this.filelist = [{ url: result.data }];
        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async read1(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist1 = this.filelist1.concat({ url: result.data });
        this.newthumbArr = this.newthumbArr.concat(result.data)


        let userArray = Object.entries(this.filelist1).map(([key, value]) => {
          return { value }

        });

        userArray.forEach((item) => {
          // 截取想要部分路径

          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });
        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.service.imagelist = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

    product() {
      let urlArray = this.filelist1.map(item => item.url);

      this.$refs.product
        .validate()
        .then(async () => {
          var data = {
            id: this.leveid,
            name: this.service.name,
            free: this.service.free,
            adminid: this.auth.id,
            imagelist:urlArray,
            detaile: this.service.detaile,
            dateyx: this.service.dateyx,
            zhekou: this.service.zhekou,
            thumb: this.service.thumb_text,
            activityDuration: this.service.actdate_text,
            carwashdata: this.service.carwash,
            newthumbArr:this.newthumbArr


          };

          let result = await this.$u.api.business.leveledit(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "reLaunch",
                  url: "/pagesD/level/edit",
                  params: {
                    leveid: this.leveid,
                  },
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    async del(e) {
      let data = {
        adminid: this.auth.id,
        leveid: this.leveid,
        url: e.file.url,
      };

      var result = await this.$u.api.business.delimage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete: () => {

              this.filelist = [];
              this.service.thumb_text = ""
            
          },
        });
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
          duration: 1000,
        });
      }
    },

    del1(e) {
      this.filelist1.map(async (item, index) => {

        if (index == e.index) {
          // 删除数组中的某一项

          let data = {
            adminid: this.auth.id,
            leveid: this.leveid,
            url: e.file.url,
          };

          var result = await this.$u.api.business.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 800,
              complete: () => {
                this.filelist1.splice(e.index, index);

                // 还剩余一张的时候清空
                if (index == 0 && e.index == 0) {
                  this.filelist1 = [];
                  this.service.imagelist = ""
                }
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },

    async list() {
      let data = {
        leveid: this.leveid,
        adminid: this.auth.id,
      };
      let result = await this.$u.api.business.levelinfo(data);
      if (result.code) {

        this.service = result.data;

        if (this.service.thumb_text) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist = [{ url: this.service.thumb_text }];
        }

        if (this.service.imagelist_text) {
          this.filelist1 = this.service.imagelist_text.map((item) => {
            return {
              url: item,
            };
          });
        }
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
        });
      }
    },
  },
};
</script>

<style>
.Box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox {
  margin-left: 6px;
}

.service-name {
  /* flex: 1; */
  width: 85px;
  margin-left: 3px;
  font-size: 15px;
}

.service-count {
  width: 25px;
}

.content {
  padding: 10px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.name {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>